<template>
    <view class="questionnaire page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
        <view class="main" v-if="detail.title">
            <view class="hd">
                <view class="title fboxRow Xcenter">{{detail.title}}</view>
                <view class="info font24" style="color: #A1A3CC">截至时间：{{detail.deadlineTime}}</view>
                <view class="description font32" style="color: #000233">{{detail.description}}</view>
            </view>
            <view class="bd">
                <view class="mt50" v-for="(item, index) in questionnaire" :key="index">
                    <CompRadio v-if="item.subjectType == 1" :index="index" :inner-data="item" :answers.sync="answers"/>
                    <CompCheckbox v-else-if="item.subjectType == 2" :index="index" :inner-data="item"
                                  :answers.sync="answers"/>
                    <CompInput v-else :index="index" :inner-data="item" :answers.sync="answers"/>
                </view>
            </view>
            <view class="ft fboxRow Ycenter Xcenter">
                <view class="btn fboxRow Ycenter Xcenter font32" @click="submit">提交</view>
            </view>
        </view>
        <view class="not-wrap fboxWrap Ycenter Xcenter" v-else>
            <view class="fboxCol Ycenter Xcenter">
                <img class="not" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/not.png" alt="">
                <view class="tit font28 mt50">该问卷已暂停或被删除</view>
            </view>
        </view>
        <van-overlay :show="show" @click="show = false">
            <view class="fboxWrap not-wrap Ycenter Xcenter" @click.stop>
                <view class="complete fboxCol Ycenter" :style="{'background-image': 'url('+bg+')'}">
                    <view class="con font36">感谢您的参与</view>
                    <view class="time font24">用时{{time}}</view>
                    <view class="btn fboxRow Ycenter Xcenter font36" @click="show = false">确定</view>
                </view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
    // 接口
    import {questionnaireList, questionnaireDetail, questionnaireSubmit} from '@/api/h5.js'
    import CompRadio from './comp.radio'
    import CompCheckbox from './comp.checkbox'
    import CompInput from './comp.input'
    export default {
        components: {CompRadio, CompCheckbox, CompInput},
        data() {
            return {
                bg: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/questionnaire.png',
                detail: {},
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
                questionnaire: [],
                answers: [],
                id: '',
                show: false,
                time: ''
            };
        },
        created() {
            const {token, id} = this.$route.query;
            this.token = token;
            this.id = id;
            // this.getList();
            window['getMenberId'] = () => {
                return this.id
            }
            this.getAttached()
        },
        methods: {
            getAttached() {
                questionnaireDetail({id: this.id, token: this.token}).then(res => {
                    this.detail = res.data;
                })
                questionnaireList({id: this.id, token: this.token}).then(res => {
                    this.questionnaire = res.data;
                    // this.answers = res.data
                })
            },
            submit() {
                questionnaireSubmit({
                    "answers": this.answers,
                    "qtId": this.id,
                    token: this.token
                }).then(res => {
                    if (res.data) {
                        this.time = this.getTime(res.data)
                        this.show = true
                    }
                })
            },
            getTime(time){
                // 转换为式分秒
                const h = parseInt(time / 60 / 60 % 24)
                const m = parseInt(time / 60 % 60)
                const s = parseInt(time % 60)
                // 作为返回值返回
                if(h != '00'){
                    return h+ '时'+m+'分'+s+'秒'
                }else if(m != '00'){
                    return m+'分'+s+'秒'
                }else{
                    return s+'秒'
                }
            }
        }
    }
</script>

<style scoped>
    .questionnaire {
        padding: 30rpx;
    }

    .not-wrap {
        height: calc(80vh)
    }

    .main .not {
        width: 226rpx;
        height: 203rpx
    }

    .main .tit {
        color: #101475
    }

    .main .bd {
        padding-top: 10rpx;
    }

    .main .title {
        font-size: 48rpx;
        font-weight: bold;
        color: #101475
    }

    .main .info {
        margin-top: 60rpx;
    }

    .main .description {
        margin-top: 30rpx;
        line-height: 42rpx
    }

    .main .mt50 {
        margin-top: 50rpx
    }

    .main .ft {
        margin-top: 100rpx
    }

    .main .btn {
        width: 690rpx;
        height: 84rpx;
        color: #fff;
        background: #121575;
        border-radius: 42rpx;
    }

    .complete {
        width: 690rpx;
        height: 624rpx;
        background: no-repeat top center/cover;
    }

    .complete .title {
        margin-top: 30rpx;
        color: #fff
    }

    .complete .con {
        margin-top: 335rpx;
        font-size: 52rpx;
        color: #FF5812;
        background: linear-gradient(0deg, #FF8F51 0%, #FF5A12 0%, #FFB430 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .complete .time {
        margin-top: 40rpx;
        color: #363636
    }

    .complete .btn {
        margin-top: 50rpx;
        width: 352rpx;
        height: 88rpx;
        color: #fff;
        background: url("https://ebc-prod.cdn.benwunet.com/uni-static/h5/q-btn.png") no-repeat top center/cover;
    }

</style>

